<template>
  <PageSearch
    :search-form-config="searchFormConfig"
    @queryClick="handleQueryClick"
    @resetClick="handleResetClick"
  ></PageSearch>
  <PageContent
    ref="pageContentRef"
    :content-table-config="contentTableConfig"
    @createBtnClick="handleCreateClick"
    @editBtnClick="handleEditClick"
    pageName="users"
  ></PageContent>
  <PageModal ref="pageModal" :modalConfig="modalConfigRef" :defaultInfo="defaultInfo" pageName="users"></PageModal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'

import PageSearch from '@/components/PageSearch'
import PageContent from '@/components/PageContent'
import PageModal from '@/components/PageModal'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'

// 新建和修改时对某一表单项是否显示的回调
const newCallback = () => {
  const passwordItem = modalConfig.formItems.find((item) => item.field === 'password')
  passwordItem!.isHidden = false
}
const editCallback = () => {
  const passwordItem = modalConfig.formItems.find((item) => item.field === 'password')
  passwordItem!.isHidden = true
}

// 部门角色数据
const store = useStore()
const modalConfigRef = computed(() => {
  const departmentItem = modalConfig.formItems.find((item) => item.field === 'departmentId')
  departmentItem!.options = store.state.entireDepartment.map((item: any) => {
    return { title: item.name, value: item.id }
  })
  const roleItem = modalConfig.formItems.find((item) => item.field === 'roleId')
  roleItem!.options = store.state.entireRole.map((item: any) => {
    return { title: item.name, value: item.id }
  })
  return modalConfig
})

const [pageContentRef, handleQueryClick, handleResetClick] = usePageSearch()
const [defaultInfo, pageModal, handleCreateClick, handleEditClick] = usePageModal(newCallback, editCallback)
</script>

<style scoped lang="less"></style>
